<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D卡片翻转</title>
</head>
<style>
	*{
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	}
	body{
	    min-height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: linear-gradient(200deg,#fff1eb,#ace0f9);
	}
	section{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	    transform-style: preserve-3d;
	}
	.card{
	    position: relative;
	    width: 320px;
	    height: 320px;
	    margin: 20px;
	    transform-style: preserve-3d;
	    perspective: 1000px;
	}
	.card .box{
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    transform-style: preserve-3d;
	    transition: 1s ease;
	}
	.card .box .img-box{
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}
	.card .box .img-box img{
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}
	.card .box .con-box{
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: #333;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    backface-visibility: hidden;
	    transform-style: preserve-3d;
	    transform: rotateY(180deg);
	}
	.card .box .con-box div{
	    color: #fff;
	    padding: 20px;
	    background: linear-gradient(30deg,#514a9d,#24c6dc);
	    transform: translateZ(100px);
	}
	.card .box .con-box div h2{
	    font-size: 20px;
	    letter-spacing: 2px;
	}
	.card .box .con-box div p{
	    font-size: 15px;
	    text-align: justify;
	    margin-top: 5px;
	}
	.card:hover .box{
	    transform: rotateY(180deg);
	}
</style>
<body>
    <section>
        <div class="card">
            <div class="box">
                <div class="img-box">
                    <img src="./images/1.jpg" alt="">
                </div>
                <div class="con-box">
                    <div>
                        <h2>蒙奇·D·路飞</h2>
                        <p>蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。外号“草帽”路飞，是草帽一伙、草帽大船团的船长，极恶的世代之一。橡胶果实能力者，悬赏金15亿贝里。梦想是找到传说中的One
                            Piece，成为海贼王。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="img-box">
                    <img src="./images/2.jpg" alt="">
                </div>
                <div class="con-box">
                    <div>
                        <h2>罗罗诺亚·索隆</h2>
                        <p>罗罗诺亚・索隆，日本漫画《航海王》及其衍生作品中的角色。“草帽一伙”的战斗员，人称“海贼猎人”。2年前登陆香波地群岛的11位“超新星”其中的一位。同时也是被人称作“极恶的世代”中的一位。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="img-box">
                    <img src="./images/3.jpg" alt="">
                </div>
                <div class="con-box">
                    <div>
                        <h2>山治</h2>
                        <p>山治，日本漫画《海贼王》及其衍生作品中的角色。草帽一伙的厨师，因踢技快准狠被海军称之为“黑足”，悬赏金为3亿3000万贝里。海贼中的绅士，有着卷曲眉毛，永远遮住半边脸的家伙，香烟不离口，最爱女人，很花心但很有风度，从不愿意伤害任何女性，哪怕是敌人。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>